function Enlarge(){
    // 获取所有需要操作的元素
    this.middleBox = document.querySelector('.enlarge .middle');
    this.middleImg = document.querySelector('.enlarge .middle>img');
    this.mask = document.querySelector('.enlarge .middle .mask');
    this.bigBox = document.querySelector('.enlarge .middle .big');
    this.bigImg = document.querySelector('.enlarge .middle .big>img');
    this.smallImgs = document.querySelectorAll('.enlarge .small img');
}
// 在方法中绑定事件
Enlarge.prototype.event = function(){
    // 给小图绑定点击事件
    for(let i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick = ()=>{
            // 将所有小图的红色边框去掉
            for(var j=0;j<this.smallImgs.length;j++){
                this.smallImgs[j].className = '';
            }
            // 给当前点击的小图添加红色边框
            this.smallImgs[i].className = 'active';
            // 获取当前小图的路径
            var path = this.smallImgs[i].getAttribute('src')
            // console.log(path);
            // 将图片路径设置给中图和大图
            this.middleImg.setAttribute('src', path)
            this.bigImg.setAttribute('src', path)
        }
    }
    // 移入移出让遮罩和大盒子显示隐藏
    this.middleBox.onmouseover = ()=>{
        this.mask.style.display = this.bigBox.style.display = 'block'
        // 鼠标移动事件 - 让遮罩跟着走
        this.middleBox.onmousemove = ()=>{
            // 获取鼠标位置
            var e = window.event;
            var x = e.pageX;
            var y = e.pageY;
            // console.log(this.middleBox.offsetLeft);
            // 计算遮罩left和top
            var l = x - this.mask.offsetWidth/2 - this.middleBox.offsetLeft - 1;
            var t = y - this.mask.offsetHeight/2 - this.middleBox.offsetTop - 1;
            if(l<0) l=0
            if(t<0) t=0
            if(l>this.middleBox.clientWidth - this.mask.offsetWidth){
                l=this.middleBox.clientWidth - this.mask.offsetWidth
            }
            if(t>this.middleBox.clientHeight - this.mask.offsetHeight){
                t=this.middleBox.clientHeight - this.mask.offsetHeight
            }
            // 设置遮罩的left和top
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            /*
            大图移动比例 = 遮罩在中盒子上移动的比例
            大图移动的距离 = 大图的大小 * 比例
            大图移动的距离 = 遮罩移动的距离/中盒子的大小*大图的大小
            */

            var xpercent = l / this.middleBox.clientWidth;
            var ypercent = t / this.middleBox.clientHeight;

            var bigX = this.bigImg.offsetWidth * xpercent
            var bigY = this.bigImg.offsetHeight * ypercent;

            this.bigImg.style.left = -bigX + 'px'
            this.bigImg.style.top = -bigY + 'px'
        }
    }
    this.middleBox.onmouseout = ()=>{
        this.mask.style.display = this.bigBox.style.display = 'none'
    }
}
